<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            javascript 一门脚本语言
            弱变量类型
            JS 类型自动改变
        * */
        var i =1;
        var j ="zhangsan";  //string  --- >String
        var str1 =111;
        var str2 ="111";
        alert(str1==str2);   //“==”值相等就为true,窗口弹窗

        //向页面输出内容
        document.write("程序员");
        //向控制台输出
        console.log("向控制台输出");
        //在页面输出内容
        //innerHTML

        function func1() {
            //1.首先要获得这个div
            var a = document.getElementById("div1")
            a.innerHTML = "<font color='red'>内容被替换掉了</font>"
            //innerText 知识普通的文本
            //div.innerText = "<font color='red'>内容被替换掉了</font>";
        }

        <!--
			1.校验用户名, 长度不能小于6位
				1.确定事件: 提交事件 onsubmit
				2.事件要触发函数 checkForm()
				3. 函数中要去做一些校验
		-->
        function checkForm() {
            //获取用户输入的内容
            var input1 = document.getElementById("username");
//				alert(input1.value); input1.value获取input1的内容值
            var uValue = input1.value;
            if(uValue.length >= 6){

            }else{
                alert("对不起,用户名太短啦!")
                return false;
            }
            //邮箱的校验
            //获取用户输入的邮箱的值
            var email = document.getElementById("email")
            var uEmail = email.value;
            //正则表达式.test() 验证邮箱是否符合
            if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(uEmail)){
                alert("校验成功");
            }else{
                alert("校验失败");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <input type="button" value="点我修改文本" onclick="func1()"><br>
    <div id="div1">
        这里的内容一会要被替换掉
    </div>

    <form action="../前台界面/新网站首页.html" method="post" onsubmit="return checkForm()">
        用户名：<input type="text" id="username"><br>
        密 码：<input type="email" id="email"><br>
        邮 箱：<input type="submit" value="提交">
    </form>
</body>
</html>